<template>
	<view class="goods">
		<view class="goods-bottom">
			<view class="action">
				<view class="collect" @click="onCollect">
					<u-icon :name="isCollect ? 'star-fill' : 'star'" size="48rpx" :color="isCollect ? '#3e9dbb' : '#242424'"></u-icon>
					<text class="label">{{ isCollect ? '已收藏' : '收藏' }}</text>
				</view>
				<view class="service" @click="openService">
					<u-icon class="service-icon" name="/static/images/master/service/service.png" size="38rpx" color="#242424"></u-icon>
					<text class="label">客服</text>
				</view>
			</view>
			<button class="submit" @click="onSubmit">立即购买</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';

	const emits = defineEmits(['submit', 'update:show-phone']);
	defineProps({
		productId: {
			type: [Number, String],
			default: 0,
		},
	});
	
	// 商品收藏状态
	const isCollect = ref<boolean>(false);
	// 商品收藏
	const onCollect = (): void => {
		isCollect.value = !isCollect.value;
	};
	
	// 打开客服弹窗
	const openService = (): void => {
		emits('update:show-phone', true);
	};
	// 立即购买
	const onSubmit = (): void => {
		emits('submit');
	};
</script>

<style lang="scss" scoped>
	.goods {
		width: 100%;
		height: 120rpx;
		.goods-bottom {
			width: 100%;
			height: 120rpx;
			background: #FFFFFF;
			border-top: 1rpx solid #EEEEEE;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 100;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 24rpx;
			box-sizing: border-box;
			.action {
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;
				padding-left: 8rpx;
			}
			.collect,
			.service {
				width: 110rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: center;
				.label {
					line-height: 24rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #242424;
					margin-top: 12rpx;
				}
			}
			.service {
				.service-icon {
					padding: 4rpx;
				}
			}
			.submit {
				width: 468rpx;
				height: 88rpx;
				background: #3E9DBB;
				border-radius: 44rpx;
				line-height: 88rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin: 0;
				&::after {
					border: 0;
				}
			}
		}
	}
</style>